<template>
	<view>
		<block v-for="(car,index) in cars" :key="index">
			<view class="nocar" v-if="cars==null">
				<text>暂无车辆信息</text>
			</view>
			<view class="head1" v-else>
				<view class="head11">
					
					<view>
						<image class="carimg"
							:src="car.Image"
							mode=""></image>
					</view>
					<view class="head2">
						<view class="head21">车型: {{ car.name }}</view>
						<view class="head22">车牌: {{ car.num }}</view>
					</view>
				</view>
				
				<view class="head3">
					<view>设为默认车辆</view>
					<view>删除</view>
				</view>

			</view>

		</block>
		<view class="add" style="text-align: center;" @click="addcar">
			<text>添加车辆</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cars: [{
					name: '沃尔沃s90',
					num: '豫A.66666',
					Image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.mgb7ogEXnq_h4irJ8q3-9AAAAA?rs=1&pid=ImgDetMain'
				},
				{
					name: '沃尔沃xc90',
					num: '豫A.66666',
					Image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.mU2KvH6W_88p7Av7dKGUVwHaE7?rs=1&pid=ImgDetMain'
				},
				
				
				{
					name: '沃尔沃xc90',
					num: '豫A.66666',
					Image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.mU2KvH6W_88p7Av7dKGUVwHaE7?rs=1&pid=ImgDetMain'
				}]
			}
		},
		methods: {
			addcar(){
				uni.navigateTo({
					url:"/pages/mycar/addcar"
				})
			}
		}
	}
</script>

<style>
	.nocar {
		width: 95%;
		background-color: aqua;

		margin: auto;
		margin-top: 40rpx;
		border: 1px solid #ddd;
		border-radius: 30rpx;
	}

	.nocar text {
		font-size: 34rpx;
		margin-left: 40rpx;
		line-height: 80rpx;
	}

	.head1 {
		width: 95%;
		/* margin-left: 40rpx; */
		margin: auto;
		margin-top: 50rpx;
		background-color: aqua;
		border: 1px solid #ddd;
		border-radius: 30rpx;
	}

	.head11 {
		display: flex;
		justify-content: space-between;
		border-bottom: 10rpx solid whitesmoke;
	}

	.carimg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-left: 30rpx;
		margin-top: 40rpx;
	}

	.head2 {
		margin-top: 60rpx;
		margin-right: 240rpx;
	}

	.head21 {
		font-size: 34rpx;
		font-weight: 600;
	}
	.head3{
		display: flex;
		justify-content: space-between;
		margin: 20rpx 30rpx ;
	}
	
	
	.add{
		position: fixed;
		   bottom: calc( var(--window-bottom) + 3px);
		   margin:auto;
		   width: 95%;
		   background-color: aqua;
		   margin-left: 20rpx;
		   line-height: 100rpx;
		   /* 圆角 */
		   border-radius: 100rpx;
		   
		   font-size: 44rpx;
		   color: aliceblue;
		    
		    /* z-index: 1030; */
		    /* margin-bottom: 6; */
	}
</style>